<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title><%= title %></title>
    <link rel="stylesheet" href="../public/css/bootstrap.css">
</head>

<body>

    <form class="text-center col-xs-10 col-xs-offset-1 col-sm-6 col-sm-offset-3 form-horizontal">
        <h2 style="margin-bottom: 15px;">这是<%= title %>页面</h2>
        <div class="form-group">
            <label for="name" class="col-sm-2 control-label">Name</label>
			<div class="col-sm-10">
				<input type="text" class="form-control" id="name" placeholder="User Name">
			</div>
            <p class="userInfo text-danger text-left col-sm-10 col-sm-offset-2"></p>
        </div>
        <div class="form-group">
            <label for="pass" class="col-sm-2 control-label">Password</label>
            <div class="col-sm-10">
				<input type="password" class="form-control" id="pass" placeholder="Password">
            </div>
			<p class="passInfo text-danger text-left col-sm-10 col-sm-offset-2"></p>
        </div>
        <button type="submit" class="btn btn-default btn-block" style="margin-bottom: 15px;"><%= title %></button>
        <div><%- href %></div>
    </form>

    <script src="../public/js/jquery.js"></script>
    <script>
        $('button').click(function () {
            let user = $('#name').val();
            let pass = $('#pass').val();
            $('.userInfo').html('');
            $('.passInfo').html('');
            //   进行非空判断
            if (user == "") {
                $('.userInfo').html('请输入用户名');
            } else if (!user.match(/[_a-zA-Z0-9]{5,13}/)) {
                $('.userInfo').html('用户名只能为5-13位的下划线、字母和数字');
            } else {
                if (pass == "") {
                    $('.passInfo').html('请输入密码');
                } else if (!pass.match(/[_a-zA-Z0-9]{6,20}/)) {
                    $('.passInfo').html('密码只能为6-13位下划线、字母和数字');
                } else {
                    $.ajax({
                        url: 'http://<%= url %>/<%= ajax %>',
                        method: 'post',
                        data: {
                            user: user,
                            pass: pass
                        },
                        success: function (res) {
                            console.log(res)
                            switch (res.code) {
                                case -1:
                                    $('.userInfo').html('请输入用户名');
                                    break;
                                case -2:
                                    $('.userInfo').html('用户名只能为5-13位的下划线、字母和数字');
                                    break;
                                case -3:
                                    $('.passInfo').html('请输入密码');
                                    break;
                                case -4:
                                    $('.passInfo').html('密码只能为6-13位下划线、字母和数字');
                                    break;
                                case -5:
                                    $('.userInfo').html('该用户名不存在');
                                    break;
                                case -6:
                                    $('.passInfo').html('密码不正确');
                                    break;
                                case -7:
                                    $('.passInfo').html('未知错误');
                                    break;
                                case 1:
                                    alert('<%= title %>成功，即将跳转');
                                    // 跳转到首页
                                    // location.href实现页面跳转
                                    location.href = 'http://<%= url %>/'
                                    break;
                                default:
                                    break;
                            }
                        }
                    })
                }
            }
            // 阻止默认行为
            return false;
        })
    </script>
</body>

</html>